<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WK科技</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta name="description" content="致力于打造最大的芯片平台" />
    <meta name="keywords" content="芯片，半导体，集成电路" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/Dashboard.css" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style></style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>

    <!-- Button trigger modal -->
    <button
      style="display: none"
      type="button"
      class="btn btn-primary btn1"
      data-bs-toggle="modal"
      data-bs-target="#staticBackdrop"
    >
      编辑
    </button>

    <!-- ------------Modal ---------------------------------->
    <div
      class="modal fade"
      id="staticBackdrop"
      data-bs-backdrop="static"
      data-bs-keyboard="false"
      tabindex="-1"
      aria-labelledby="staticBackdropLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content hider">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">
              编辑项目信息
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <!--  -->
          <!--  -->
          <form action="" class="box0">
            <div class="modal-body">
              <div style="display: flex; justify-content: space-between">
                <div class="mb-3 box">
                  <label for="projects_name" class="form-label"
                    >项目名称：</label
                  >
                  <input
                    type="text"
                    class="form-control projects_name"
                    id="projects_name"
                    name="projects_name"
                  />
                </div>
                <div class="mb-3 box" style="margin-right: 45px">
                  <label for="projects_description" class="form-label"
                    >项目描述：</label
                  >
                  <input
                    type="text"
                    class="form-control projects_description"
                    id="projects_description"
                    name="projects_description"
                  />
                </div>
              </div>
              <!--  -->
              <!--  -->
              <div style="display: flex; justify-content: space-between">
                <div class="mb-3 box">
                  <label for="projects_leader" class="form-label"
                    >项目组长：</label
                  >
                  <input
                    type="text"
                    class="form-control projects_leader"
                    id="projects_leader"
                    name="projects_leader"
                  />
                </div>
                <div class="mb-3 box" style="margin-right: 45px">
                  <label for="projects_time" class="form-label"
                    >项目时间：</label
                  >
                  <input
                    type="text"
                    class="form-control projects_time"
                    id="projects_time"
                    name="projects_time"
                  />
                </div>
              </div>
              <!--  -->
              <!--  -->
            </div>
          </form>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              关闭
            </button>
            <button
              type="button"
              data-bs-dismiss="modal"
              class="btn btn-primary btn0"
            >
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- ------------------------------------------------------ -->
    <div class="main">
      <!--左边导航栏 -->
      <div class="tab">
        <div class="logo">
          <div class="out">
            <img src="./images/logo4.png" alt="" />
          </div>
        </div>
        <div class="chuangjian">
          创建项目
          <i class="iconfont icon-jia"></i>
        </div>
        <div class="gainian1 xialakuang4 la" style="display: none">
          项目概念
        </div>
        <div class="renwu1 xialakuang4 la" style="display: none">任务列表</div>
        <div class="chuangjian1 xialakuang4 la" style="display: none">
          创建任务
        </div>
        <ul>
          <li class="pan"><i class="iconfont icon-yibiaopan"></i>仪表盘</li>
          <li class="item">
            <i class="iconfont icon-shuxie"></i>
            我的项目
            <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="yy_liebiao xialakuang kapian la" style="display: none">
            项目
          </div>
          <div class="liebiao xialakuang kapian la" style="display: none">
            列表显示
          </div>
          <div class="renwu2 xialakuang la" style="display: none">任务管理</div>
          <div class="wenjian2 xialakuang la" style="display: none">
            文件管理
          </div>
          <div class="gainian2 xialakuang la" style="display: none">
            概念动态
          </div>
          <div class="tongji xialakuang la" style="display: none">统计</div>
          <li class="renwu">
            <i class="iconfont icon-renwu"></i>我的任务
            <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="yy_renwu xialakuang5 la" style="display: none">
            任务
          </div>
          <div class="bianji xialakuang5 la" style="display: none">
            编辑任务
          </div>
          <li class="baobiao">
            <i class="iconfont icon-baobiao"></i>报表管理
            <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="yy_baobiao xialakuang2 la" style="display: none">报表</div>

          <div class="fenbu xialakuang2 la" style="display: none">任务分布</div>
          <div class="jinzhan xialakuang2 la" style="display: none">
            任务进展
          </div>
          <li class="xitong">
            <i class="iconfont icon-xitongshezhi"></i>系统设置
            <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
          </li>
          <div class="xiaoxi xialakuang3 la" style="display: none">
            消息管理
          </div>
          <div class="rizhi xialakuang3 la" style="display: none">日志管理</div>
        </ul>
      </div>
      <!-- 右边大版块-->
      <div class="right">
        <div class="header">
          <i class="iconfont icon-liebiao2"></i>
          <i class="iconfont icon-Magnifier"></i>
          <i class="iconfont icon-xiaoxi"></i>
        </div>
        <div class="big-content">
          <!--------------------内容写在这里---- -->
          <div class="content">
            <!-- 这里写内容这里写内容这里写内容这里写内容这里写内容这里写内容这里写内容这里写内容这里写内容这里写内容 -->
            <div class="statistics">
              <div class="all">
                <p><em>项目总数</em><span class="iconfont">&#xe606;</span></p>
                <h1><span>50</span></h1>
              </div>
              <div class="go_on">
                <p><em>进行中</em><span class="iconfont">&#xe606;</span></p>
                <h1><span>30</span></h1>
              </div>
              <div class="overdue">
                <p><em>已逾期</em><span class="iconfont">&#xe606;</span></p>
                <h1><span>5</span></h1>
              </div>
              <div class="accomplish">
                <p><em>项目完成率</em><span class="iconfont">&#xe606;</span></p>
                <h1><span>78%</span></h1>
                <div class="progress_bar">
                  <div class="bar"></div>
                </div>
              </div>
            </div>
            <div class="middle">
              <div class="project_nav">
                <em>项目分布</em>
                <select class="form-select">
                  <option selected disabled>--部门/团队--</option>
                  <option value="0">全部</option>
                  <option value="1">结构研发</option>
                  <option value="2">电子研发</option>
                  <option value="3">工程项目</option>
                </select>
                <div class="zj"></div>
                <div class="date">
                  <i class="year">本年:</i>
                  <span class="month">本月:</span>
                  <input type="date" class="" name="" id="datetime" />
                </div>
              </div>
              <div id="main"></div>
              <div class="department">
                <h5>各部门项目数量</h5>
                <ul>
                  <li class="pp">
                    <i>1</i>
                    <em>结构研发部</em>
                    <span>30</span>
                  </li>
                  <li class="oo">
                    <i>2</i>
                    <em>nini</em>
                    <span>30</span>
                  </li>
                  <li class="ii">
                    <i>3</i>
                    <em>nini</em>
                    <span>30</span>
                  </li>
                </ul>
                <div id="main1"></div>
              </div>
            </div>
            <!-- -----------------项目列表------------------------ -->
            <div class="project_list">
              <div class="list_top">
                <h6>项目列表</h6>
                <div class="add">+</div>
                <ul>
                  <li class="active all0" data-id="1">全部</li>
                  <li class="on" data-id="2">进行中</li>
                  <li class="start" data-id="3">未开始</li>
                </ul>
                <div class="search">
                  <input
                    class="ccc"
                    type="text"
                    placeholder="输入所查询项目名"
                  />
                  <span class="iconfont search1">&#xe62d;</span>
                </div>
              </div>
              <div class="list_content">
                <table class="table">
                  <!-- <tr>
                    <td class="a">
                      <div class="text1">
                        <img src="./images/logo3.png" alt="" />
                        <div><em>项目一</em><br /><span>项目描述</span></div>
                      </div>
                    </td>
                    <td class="b"><em>项目组长</em><br /><span>阳阳</span></td>
                    <td class="c">
                      <em>创建时间</em><br /><span>2022-06-16 18:00</span>
                    </td>
                    <td class="d">
                      <em>进度条</em>
                      <br />
                      <div>
                        <p class="color1"></p>
                      </div>
                      <i>60%</i>
                    </td>
                    <td class="e">
                      <em>操作</em>
                      <p>
                        <span>编辑</span
                        ><span>更多 <em class="iconfont">&#xeb04;</em></span>
                      </p>
                    </td>
                  </tr> -->
                  <tbody id="list">
                    <!-- 添加的内容 -->
                  </tbody>
                </table>
              </div>
              <div class="list_page">
                <div class="container mt-3">
                  <ul class="pagination">
                    <li class="page-item">
                      <a class="page-link" href="#">上一页</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="#" data-id="1">1</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="#" data-id="2">2</a>
                    </li>

                    <li class="page-item">
                      <a class="page-link" href="#" data-id="3">3</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="#" data-id="4">4</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="#">下一页</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!------------------------------------->
          <div class="scroll"></div>
        </div>
      </div>
    </div>
    <!-- ----------------------------------script------------------------------------------>
    <script src="./js/index.js"></script>
    <script src="./js/Dashboard.js"></script>
    <!-- 项目分布趋势图 -->
    <script>
      const myChart = echarts.init(document.querySelector("#main"));
      myChart.setOption(option);
    </script>
    <script>
      const myChart1 = echarts.init(document.querySelector("#main1"));
      myChart1.setOption(option1);
    </script>
    <script src="./dianji.js"></script>

  </body>
</html>
